<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-09-10 15:23:40
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-09-10 17:25:50
 * @FilePath: /nhw/src/views/Work/StatisticalAnalysis/components/TabMWD.vue
-->
<template>
  <div class="btn-container">
    <Button :class="{ active: item === 'day' }" @click="switchTab('day')"
      >今日</Button
    >｜
    <Button :class="{ active: item === 'week' }" @click="switchTab('week')"
      >本周</Button
    >｜
    <Button :class="{ active: item === 'month' }" @click="switchTab('month')"
      >本月</Button
    >
  </div>
</template>

<script>
import { Button } from "vant";
export default {
  name: "TabMWD",

  components: { Button },

  directives: {},

  data() {
    return {
      item: "day",
    };
  },

  mounted() {},

  methods: {
    switchTab(value) {
      this.item = value;
      this.$emit("onTabMWD", value);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/var.less");
.btn-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: @dark;
  padding-right: 28px;
  margin-left: auto;
  .van-button {
    height: 38px;
    border: none;
    background: transparent;
    padding-left: 8px;
    padding-right: 8px;
    color: @gray;
    &.active {
      color: @primary;
    }
  }
}
</style>